<template>
	<view class="login-box">
		<view class="logo">
			<image src="/static/logo/logo.webp" class="img"></image>
		</view>
		<view class="userInfo">
			<view class="number">
				中国 +86
				<u-icon name="arrow-right"></u-icon>
			</view>
			<u--input v-model="phone" placeholder="请输入手机号" border="bottom" fontSize="22px" maxlength="11">
			</u--input>
			<view class="code">
				<image class="img" :src="imgUrl" @click="changeCode">
				</image>

				<u--input v-model="code" placeholder="请输入验证码" border="bottom" fontSize="22px">
				</u--input>

			</view>

		</view>
		<u-button type="primary" text="登录" @click="submit"></u-button>
	</view>
</template>

<script>
	import {
		reqLogin
	} from '@/common/api.js'
	
	export default {
		data() {
			return {
				phone: '',
				code: '',
				imgUrl: "http://43.143.135.46:8989/user/verifyCode"
			}
		},

		methods: {

			// 登录
			async submit() {
				const {
					phone,
					code
				} = this
				const res = await reqLogin(code,phone)
				// console.log(res);
				if (res.code == 200) {
					uni.setStorageSync('token', res.data.userInfoToken)
					uni.switchTab({
						url: '/pages/center/center'
					})
				}
			},

			//更新验证码
			changeCode() {
				this.imgUrl = this.imgUrl + "?date=" + new Date;
			}
		},

		mounted() {

		}
	}
</script>

<style lang="scss">
	.login-box {
		padding: 0 20px;

		.logo {
			width: 100px;
			height: 100px;
			border-radius: 20px;
			overflow: hidden;
			margin: 50px auto;

			.img {
				width: 100%;
				height: 100%;
				// display: block;
			}
		}

		.userInfo {
			.number {
				display: flex;
				padding-left: 9px;
				position: relative;
			}

			.u-input {
				margin-bottom: 20px;
			}

			.img {
				width: 80px;
				height: 40px;
			}
		}

		.code {
			display: flex;
		}
	}
</style>
